<template>
  <div style="background-color: #eee">
    <div class="header mt-1 bg-white p-3">
            <span class="p-1 text-slate-300">首页</span>/<span class="pl-2">办公室管理</span>
            <h3 class="font-bold text-xl">办公室管理</h3>
        </div>
    <div>
      <n-button
        type="info"
        size="medium"
        class="ml-auto mt-2"
        @click="AddNewUser"
        >+ 新建</n-button
      >
    </div>
    <div>
      <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
      />
    </div>
    <div class="flex justify-end">
      <n-pagination
        v-model:page="page"
        :page-count="totalpage"
        @update:page="changepage"
      />
    </div>
    <AddUser
      v-if="showModal"
      :showModal="showModal"
      @CheckShowModal="CheckShowModal"
    ></AddUser>
    <EditUser
      v-if="showEditModal"
      :showModal="showEditModal"
      :userId="userId"
      @CheckShowModal="CheckEditShowModal"
    ></EditUser>
    <DeleteUser
      v-if="showDelModal"
      :userId="userId"
      :showModal="showDelModal"
      @CheckShowModal="CheckShowModal"
    ></DeleteUser>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, reactive } from "vue";
import { NButton, useMessage } from "naive-ui";
import type { DataTableColumns } from "naive-ui";
import AddUser from "./comp/AddUser.vue";
import EditUser from "./comp/EditUser.vue";
import DeleteUser from "./comp/DeleteUser.vue";
import { getDept } from "@/api/dept";
type Song = {
  oId: number;
 oName: string;
  oTel: string;
};
const page = ref(1);
const totalpage = ref(0);
const userId = ref(0);
const showModal = ref(false);
const showDelModal = ref(false);
const showEditModal = ref(false);
const message = useMessage();
const createColumns = ({
  play,
}: {
  play: (row: Song) => void;
}): DataTableColumns<Song> => {
  return [
    {
      title: "序号",
      key: "oId",
    },
    {
      title: "门牌号",
      key: "oNum",
    },
    {
      title: "办公室名称",
      key: "oName",
    },
    {
      title: "电话",
      key: "oTel",
    },
    {
      title: "职能",
      key: "oInfo",
    },
    {
      title: "操作",
      key: "actions",
      render(row) {
        return [
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              onClick: () => {
                userId.value = row.oId;
                showEditModal.value = true;
              },
            },
            { default: () => "修改" }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              type: "error",
              onClick: () => {
                userId.value = row.oId;
                showDelModal.value = true;
              },
            },
            { default: () => "删除" }
          ),
        ];
      },
    },
  ];
};

const data: any = ref();
const columns = createColumns({
  play(row: Song) {
    message.info(`Play ${row.oName}`);
  },
});
const params = reactive({
  page: 1,
});
const init = () => {
  getDept().then((res: any) => {
    data.value = res.data.data;
    totalpage.value = res.data.totalPage;
  });
};
init();
const pagination = false;
const AddNewUser = () => {
  showModal.value = true;
};
const CheckShowModal = (val: any) => {
  showModal.value = val;
  showDelModal.value=val
  init();
};
const CheckEditShowModal = (val: any) => {
  showEditModal.value = val;
  init();
};

const changepage = (val: number) => {
  params.page = val;
  getDept().then((res: any) => {
    // data.value = res.data.data;
  });
};
</script>

<style scoped lang="scss">
div {
  margin-top: 1vh;
}
::v-deep(.n-data-table .n-data-table-th) {
  text-align: center;
}
::v-deep(.n-data-table .n-data-table-td) {
  text-align: center;
}
</style>
